import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart' ;
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:mfkb/config/Config.dart';
import 'package:mfkb/plugin/MyBehavior.dart';
import 'package:mfkb/service/FunService.dart';
import 'package:toast/toast.dart';
import 'package:tobias/tobias.dart';

class PhoneBill extends StatefulWidget {
  @override
  _PhoneBillState createState() => _PhoneBillState();
}

class _PhoneBillState extends State<PhoneBill> {
  dynamic data = {"img":"" , "descTxt":""} ;
  String phone = "" ;
  int money = 10 ;
  TextEditingController _textEditingController =  TextEditingController();
  List moneyList = [{"money":10} , {"money":20} , {"money":30} , {"money":50} , {"money":100} , {"money":200} , {"money":300} , {"money":500}] ;
  List select = [true , false , false , false , false , false , false , false] ;

  @override
  void initState() {
    super.initState();
    FunService().phone().then((value){
      if(value["code"] == 200){
        data = value["data"] ;
        moneyList = value["data"]["money"] ;
        for(var i = 0 ; i < moneyList.length ; i++){
          select[i] = false ;
        }
        select[0] = true ;
      }else{
        Toast.show(value["msg"], context) ;
      }
      setState(() { });
    }) ;
  }

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark ,
      child: Scaffold(
        body: Container(
          color:Color.fromARGB(255, 245, 246, 248) ,
          child: Column(
            children: <Widget>[
              Container(
                height: MediaQuery.of(context).padding.top ,
              ) ,
              Container(
                height: 45,
                child: Row(
                  children: <Widget>[
                    Container(
                      width: 17,
                      height: 17,
                      margin: EdgeInsets.only(left:ScreenUtil().setWidth(19)),
                      child: GestureDetector(
                        child: Container(
                          width: 17,
                          height: 17,
                          child: Image.asset("assets/images/back.png" , fit: BoxFit.fill,),
                        ),
                        onTap: (){
                          Navigator.of(context).pop() ;
                        },
                      ),
                    ) ,
                    Expanded(
                      child: Container(
                        child: Center(
                          child: Text("话费充值" , style: TextStyle( 
                            color: Color.fromARGB(255, 19 , 28 , 53) , 
                            fontSize: ScreenUtil().setSp(18) , 
                            fontWeight: FontWeight.bold  
                          ),), 
                        ),
                      ),
                    ) ,
                    Container(
                      height: 17 ,
                      width: 36 ,
                      margin: EdgeInsets.only(right:ScreenUtil().setWidth(15)) ,
                    ) 
                  ],
                ),
              ) ,
              Expanded(
                child: Container(
                  child: ScrollConfiguration(
                    behavior: MyBehavior() ,
                    child: ListView(
                      padding: EdgeInsets.all(0),
                      children: <Widget>[
                        Container(
                          height: ScreenUtil().setHeight(425),
                          margin: EdgeInsets.only(left:ScreenUtil().setWidth(15) , right:ScreenUtil().setWidth(15) , top:ScreenUtil().setHeight(8)),
                          decoration: BoxDecoration(
                            color:Colors.white ,
                            borderRadius: BorderRadius.all(Radius.circular(8))
                          ),
                          child: Container(
                            child: Column(
                              children: <Widget>[
                                Container(
                                  height: ScreenUtil().setHeight(80),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start ,
                                    children: <Widget>[
                                      Container(
                                        height: ScreenUtil().setHeight(14),
                                        margin: EdgeInsets.only(left:ScreenUtil().setWidth(16) , top:ScreenUtil().setHeight(13)),
                                        child: Visibility(
                                          visible: phone != "" ,
                                          child: Container(
                                            child: Text(
                                              "请输入正确的手机号码" ,
                                              style: TextStyle(
                                                fontSize: ScreenUtil().setSp(10) ,
                                                color: Color.fromARGB(255, 121, 132, 155) ,
                                                height: ScreenUtil().setHeight(12) / ScreenUtil().setSp(10)
                                              ),
                                            ),
                                          ),
                                        ),
                                      ) ,
                                      Container(
                                        height: ScreenUtil().setHeight(30),
                                        // color: Colors.red ,
                                        margin: EdgeInsets.only(left:ScreenUtil().setWidth(16) , right:ScreenUtil().setWidth(11) , top:ScreenUtil().setHeight(12)),
                                        child: Row(
                                          children: <Widget>[
                                            Expanded(
                                              child: TextField(
                                                keyboardType: TextInputType.number ,
                                                controller: _textEditingController ,
                                                decoration: InputDecoration(
                                                  hintText: "请输入正确的手机号码" ,
                                                  border: InputBorder.none ,
                                                  hintStyle: TextStyle(
                                                    fontSize: ScreenUtil().setSp(20) ,
                                                    height: ScreenUtil().setHeight(10) / ScreenUtil().setSp(20) ,
                                                    color: Color.fromARGB(255, 121, 132, 155)
                                                  )
                                                ),
                                                style: TextStyle(
                                                  fontSize: ScreenUtil().setSp(20) ,
                                                  color:Color.fromARGB(255, 19, 28, 53) ,
                                                  fontWeight: FontWeight.bold , 
                                                  height: ScreenUtil().setHeight(12) / ScreenUtil().setSp(20)
                                                ),
                                                onChanged: (value){
                                                  setState(() {
                                                    phone = value ;
                                                  });
                                                },
                                              ),
                                            ) ,
                                            GestureDetector(
                                              child: Container(
                                                width: ScreenUtil().setHeight(18),
                                                height: ScreenUtil().setHeight(18),
                                                child: Image.asset("assets/images/clear.png"),
                                              ),
                                              onTap: (){
                                                setState(() {
                                                  phone = "" ;
                                                  _textEditingController.clear() ;
                                                });
                                              },
                                            )
                                          ],
                                        ),
                                      )
                                    ],
                                  ),
                                ) ,
                                Container(
                                  height: ScreenUtil().setHeight(1),
                                  color: Color.fromARGB(255, 236, 237, 241),
                                ) ,
                                Container(
                                  margin: EdgeInsets.only(left:ScreenUtil().setWidth(15) , right:ScreenUtil().setWidth(15) , top:ScreenUtil().setHeight(30)),
                                  height: ScreenUtil().setHeight(168),
                                  child: Wrap(
                                    spacing: ScreenUtil().setWidth(12),
                                    runSpacing: ScreenUtil().setHeight(12),
                                    children: List.generate(moneyList.length, (index){
                                      return GestureDetector(
                                        child: Container(
                                          width: ScreenUtil().setWidth(97),
                                          height: ScreenUtil().setHeight(48),
                                          decoration: BoxDecoration(
                                            border: Border.all(
                                              color:select[index] ? Color.fromARGB(255, 0, 167, 187) : Color.fromARGB(255, 236, 237, 241) ,
                                            ) ,
                                            borderRadius: BorderRadius.all(Radius.circular(8))
                                          ),
                                          child: Stack(
                                            children: <Widget>[
                                              Center(
                                                child: Text(moneyList[index]["money"].toString()+"元" , style: TextStyle(
                                                  color: select[index] ? Color.fromARGB(255, 0, 167, 187): Color.fromARGB(255, 19, 28, 53) ,
                                                  fontSize: ScreenUtil().setSp(16)  ,
                                                  fontWeight: FontWeight.bold 
                                                ),),
                                              ) ,
                                              Positioned(
                                                right: 0 ,
                                                bottom: 0 ,
                                                child: Visibility(
                                                  visible: select[index] ,
                                                  child: Container(
                                                    width: ScreenUtil().setWidth(16),
                                                    height: ScreenUtil().setHeight(13),
                                                    decoration: BoxDecoration(
                                                      color: Color.fromARGB(255 , 0, 167, 187) ,
                                                      borderRadius: BorderRadius.only(
                                                        topLeft: Radius.circular(8) ,
                                                        bottomRight: Radius.circular(8)
                                                      ) ,
                                                    ),
                                                    child: Center(
                                                      child: Image.asset("assets/images/selected_1.png"),
                                                    ),
                                                  ) ,
                                                ),
                                              )
                                            ],
                                          ),
                                        ),
                                        onTap: (){
                                          for(var i = 0 ; i < select.length ; i++){
                                            select[i] = false ;
                                          }
                                          setState(() {
                                            select[index] = true ;
                                            money = moneyList[index]["money"] ;
                                          });
                                        },
                                      ) ;
                                    }) ,
                                  )
                                ) ,
                                GestureDetector(
                                  child: Container(
                                    margin: EdgeInsets.only(top:ScreenUtil().setHeight(61) , left:ScreenUtil().setWidth(33) , right: ScreenUtil().setWidth(33)),
                                    height: ScreenUtil().setHeight(48),
                                    decoration: BoxDecoration(
                                      color: Color.fromARGB(255, 0, 195, 206) ,
                                      borderRadius: BorderRadius.all(Radius.circular(8))
                                    ),
                                    child: Center(
                                      child: Text("立即充值" , style: TextStyle(
                                        fontSize: ScreenUtil().setSp(18) ,
                                        color: Colors.white ,
                                        fontWeight: FontWeight.bold ,
                                      ),),
                                    ),
                                  ),
                                  onTap: (){
                                    FocusScope.of(context).requestFocus(FocusNode());
                                    if(phone != null && phone != ""){
                                      phone = phone.trim() ;
                                      if(phone.length != 11){
                                        Toast.show("手机号码格式不对", context) ;
                                        return ;
                                      }
                                      FunService().payPhone(phone , money.toString()).then((value) async{
                                        if(value["code"] == 200){
                                          var payResult = await aliPay(value["data"]) ;
                                          print(payResult) ;
                                        }else{
                                          Toast.show(value["msg"], context) ;
                                        }
                                      }) ;
                                    }else{
                                      Toast.show("手机号码不能为空", context) ;
                                    }
                                  },
                                )
                              ],
                            ),
                          ),
                        ) ,
                        Container(
                          height: ScreenUtil().setHeight(100),
                          margin: EdgeInsets.only(left:ScreenUtil().setWidth(15) , right:ScreenUtil().setWidth(15) , top:ScreenUtil().setHeight(10)),
                          decoration: BoxDecoration(
                            border: Border.all(
                              color:Color.fromARGB(255, 238, 237, 239) ,
                            ) ,
                            borderRadius: BorderRadius.all(Radius.circular(8)),
                          ),
                          child:ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(8)),
                            child:  CachedNetworkImage(
                              placeholder: (ct , url){
                                return Container(
                                  color: Color.fromARGB(255, 246, 245, 248),
                                  child: Center(
                                    child: Image.asset("assets/images/imageloading.png"),
                                  ),
                                ) ;
                              },
                              fit: BoxFit.fill ,
                              imageUrl: Config().getImgHost() + data["img"] ,
                            ),
                          ) ,
                        ) ,
                        Container(
                          margin: EdgeInsets.only(left:ScreenUtil().setWidth(19) , right:ScreenUtil().setWidth(19) , top:ScreenUtil().setHeight(32)) ,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start ,
                            children: <Widget>[
                              Container(
                                child: Text("温馨提示" , style: TextStyle(
                                  fontSize: ScreenUtil().setSp(16) ,
                                  color: Color.fromARGB(255, 19, 28, 53) ,
                                  fontWeight: FontWeight.bold 
                                ),),
                              ) ,
                              Container(
                                margin: EdgeInsets.only(top:ScreenUtil().setHeight(15)),
                                child: Text(data["descTxt"] , style: TextStyle(
                                  fontSize: ScreenUtil().setSp(12) ,
                                  color: Color.fromARGB(255, 121, 132, 155)
                                ),),
                              )
                            ],
                          ),
                        ) ,
                      ],
                    ),
                  ),
                ),
              ) ,
            ] 
          )
        )
      )
    ) ;
  }
}